import React from 'react';
import {Typography, Row, Col, Card, Space} from 'antd';
import {
    ApartmentOutlined,
    BookOutlined,
    TeamOutlined,
    SolutionOutlined,
    UserOutlined,
} from '@ant-design/icons';
import {useNavigate} from "react-router-dom";

const {Title, Paragraph} = Typography;

export default function HomePage() {
    const navigate = useNavigate();

    const featureItems = [
        {
            title: '学院管理',
            description: '查看和管理所有学院的基本信息',
            icon: <ApartmentOutlined style={{fontSize: 32, color: '#1890ff'}}/>,
            path: '/pages/academy',
        },
        {
            title: '专业管理',
            description: '维护各学院下的专业信息',
            icon: <BookOutlined style={{fontSize: 32, color: '#52c41a'}}/>,
            path: '/pages/specialty',
        },
        {
            title: '班级管理',
            description: '管理学生所在班级的信息',
            icon: <TeamOutlined style={{fontSize: 32, color: '#faad14'}}/>,
            path: '/pages/classPage',
        },
        {
            title: '教师管理',
            description: '查看和编辑教师资料及授课信息',
            icon: <SolutionOutlined style={{fontSize: 32, color: '#722ed1'}}/>,
            path: '/pages/teacher',
        },
        {
            title: '学生管理',
            description: '管理学生基本信息与选课情况',
            icon: <UserOutlined style={{fontSize: 32, color: '#ff4d4f'}}/>,
            path: '/pages/student',
        },
    ];

    return (
        <div style={{padding: 24}}>
            {/* 欢迎区域 */}
            <div style={{marginBottom: 32}}>
                <Title level={2}>欢迎使用 学生信息管理系统</Title>
                <Paragraph type="secondary">
                    快速进入功能模块，开始您的管理工作。
                </Paragraph>
            </div>

            {/* 功能卡片区 */}
            <Row gutter={[24, 24]}>
                {featureItems.map((item, index) => (
                    <Col xs={24} sm={12} md={8} key={index}>
                        <Card
                            hoverable
                            bordered={false}
                            styles={{
                                body: {
                                    display: 'flex',
                                    flexDirection: 'column',
                                    alignItems: 'center',
                                    textAlign: 'center',
                                    padding: 24,
                                },
                            }}
                            onClick={() => navigate(item.path)}
                        >
                            <Space direction="vertical" align="center">
                                {item.icon}
                                <Title level={4}>{item.title}</Title>
                                <Paragraph style={{color: '#666'}}>{item.description}</Paragraph>
                            </Space>
                        </Card>
                    </Col>
                ))}
            </Row>
        </div>
    );
}